<template>
  <div class="add_word_wrapper">
    <div class="add_word_inner" style="">
      <el-dialog title="添加单词" :visible.sync="dialogFormVisible" style="">
        <el-form >
          <el-form-item label="单词" :label-width="formLabelWidth">
            <el-input :disabled="true" v-model="word.src" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="翻译" :label-width="formLabelWidth">
            <el-input v-model="word.tgt" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addWord">确 定</el-button>
        </div>
        <div class="imp_cmd_wrapper">
          <div class="imp_cmd_inner" style="display: flex;flex-direction: row-reverse;">
            <el-select v-model="word.imp" filterable placeholder="重要度">
              <el-option v-for="item in imps" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
            <el-select v-model="word.cmd" filterable placeholder="熟练度" style="">
              <el-option v-for="item in cmds" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
          </div>
          <div class="feature_wrapper" style="display: flex;flex-direction: row-reverse;margin-top: 20px;">
            <el-select v-model="word.features" multiple filterable allow-create default-first-option placeholder="请选择文章标签">
              <el-option v-for="item in sys_features" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
          </div>
          <div class="add_feature_wrapper">
            <div class="add_feature_inner" style="display: flex;padding-left: 73px;
            flex-direction: row-reverse;margin-top: 20px;">
              <el-input placeholder="请输入内容" v-model="feature_input" clearable style="margin-right: 0px;"></el-input>
              <div style="padding-right: 10px;">
                <el-button type="primary" icon="el-icon-edit" circle @click="addFeature"></el-button>
              </div>

            </div>
          </div>
        </div>


      </el-dialog>

    </div>
  </div>
</template>

<script>
  import {mapGetters, mapState} from 'vuex';
  import {postRequest} from "../utils/api";
    export default {
      name: "AddWordDialog",
      props: ['dialogFormVisible', 'word'],
      computed:{
        ...mapState(['sys_features']),
        ...mapGetters({asd:'inc_inc'})
      },
      data(){
        return {
          feature_input: '',
          imps: ['保留','很重要','重要','不重要'],
          cmds: ['保留','很熟练','熟练','不熟练'],
          word: {
            src: 'src',
            tgt: 'tgt',
            features: [],
            imp: '保留',
            cmd: '保留'
          },
          formLabelWidth: '120px',
          imageUrl:''
        }
      },
      methods: {
        addFeature(){
          if (this.feature_input != ''){
            this.word.features.push(this.feature_input)
            this.feature_input = ''
          }
        },
        addWord(){
          let param = {
            src: this.word.src,
            tgt: this.word.tgt,
            imp: this.word.imp,
            cmd: this.word.cmd,
            feature_strs: this.word.features,
            token: window.localStorage.getItem(("token"))
          }
          postRequest('word_consumer/add_word', param).then(res=>{
            this.$message({showClose: true, message: JSON.stringify(res.data.msg), type: 'success'})
            this.dialogFormVisible = false
          }).catch(err=>{
            this.$message({showClose: true, message: JSON.stringify(err), type: 'error'})
          })
        }
      },
      watch: {
        dialogFormVisible(newv,oldv){
          this.$emit("showDialog", newv)
        }
      }
    }
</script>

<style scoped>
  .imp_cmd_inner .el-select{
    margin-left: 20px;
  }
  .feature_wrapper .el-select{
    width: 520px;
  }
</style>
